<template>
  <div :class="enable?'button_container':'button_container_enable'" @click="onClick">{{buttonTitle}}</div>
</template>

<script>
export default {
  data() {
    return {
      enable: true,
      buttonTitle: "点击获取验证码"
    };
  },
  methods: {
    onClick() {
      if (!this.enable) {
        return;
      }
      window.console.log("111111");
      this.enable = !this.enable;
      var count = 10;
      var timer = window.setInterval(() => {
        count--;
        this.buttonTitle = `${count}秒后重试`;
        if (count === 0) {
          this.enable = !this.enable;
          this.buttonTitle = "点击获取验证码";
          window.clearInterval(timer);
        }
      }, 1000);
    }
  }
};
</script>

<style scoped>
.button_container {
  background-color: red;
  width: 100px;
  height: 40px;
}

.button_container_enable {
  background-color: lightgray;
  width: 100px;
  height: 40px;
}
</style>